<template>
  <div class="box">
    <h3>{{ msg }}</h3>
    <h4>{{ obj.name }}</h4>
    <h5>{{ age >= 18 ? '成年了' : '未成年' }}</h5>
    <h6>{{ obj.info.toUpperCase() }}</h6>
    <a :href="url">百度</a> <br />
    <input type="text" :value="msg1" />
    <input type="checkbox" :checked="flag" />
    <img :src="imgUrl" alt="" />
    <button v-on:click="fn">我在哪啊</button>
    <button @click="fn">按钮</button>
    <div
      @click="divClick"
      style="width: 200px; height: 200px; border: 1px solid red"
    >
      <button @click="innerClick($event,100)">内部的button</button>
    </div>
  </div>
</template>

<!-- <style lang="less">
.box {
  .color1{
    color: red;
  }
  .color2{
    color:greenyellow
  }
}
</style> -->
<script>
export default {
  //1.提供一个data的配置项，用来提供数据
  //2.data是一个函数，返回一个数据对象
  data() {
    return {
      flag: true,
      url: 'https://www.baidu.com/',
      age: 18,
      msg: '过年了',
      obj: {
        name: '传智播客',
        info: 'kunsiwole',
      },
      msg1: '我是前端就业薪资最高的学生',
      imgUrl:
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.ZcjidB6ytMyNAjg9clT4PAHaNK?pid=ImgDet&rs=1',
    }
  },
  methods: {
    fn() {
      console.log('好闷啊')
    },
    divClick() {
      console.log('我是div的click')
    },
    innerClick(e,num) {
      e.stopPropagation()
      console.log('我是内部的click')
      console.log(num);
    },
  },
}
</script>
